<template>
	<div class="myLive_list">
		<nav-header>
			<template slot="menuBefore">
				<li>
					<router-link to="/resources/live/livePlay-list" tag="a">直播列表</router-link>
				</li>
				<li class="gap">&gt;</li>
			</template>
			<li>直播统计</li>
		</nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width">
						<el-input v-model="listParam.keyword" @keyup.enter.native="searchLiveList" placeholder="请输入用户名搜索">
						</el-input>
					</div>
					<el-button type="primary" @click="searchLiveList">搜索</el-button>
					<el-button type="primary" @click="reachList">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="primary" @click="downloadMater">导出列表</el-button>
				</div>
			</div>
			<div class="zh-table-contents">
				<el-table border id="rebateSetTable" ref="singleTable" :data="liveListData" highlight-current-row style="width: 100%" v-if="$store.state.checkLevel">
					<el-table-column type="index" label="序号" align='center' show-overflow-tooltip width="60">
					</el-table-column>
					<el-table-column property="u_number" label="登录帐号" align='center' show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column property="u_name" align='center' label="用户名" show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column property="u_sex_name" align='center' label="性别" show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column property="u_email" align='center' label="邮箱" show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column property="u_telphone" align='center' label="手机" show-overflow-tooltip width="">
					</el-table-column>
					<!-- 	<el-table-column width="210" align='center' property="time_frame" show-overflow-tooltip label="时段">
					</el-table-column>
					<el-table-column width="" align='center' property="join_time" show-overflow-tooltip label="观看直播时间">
					</el-table-column> -->
				</el-table>
				<el-table border id="rebateSetTable" ref="singleTable" :data="liveListData" highlight-current-row style="width: 100%" v-else>
					<el-table-column type="index" label="序号" align='center' show-overflow-tooltip width="60">
					</el-table-column>
					<el-table-column property="u_number" label="登录帐号" align='center' show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column property="" label="组织" align='center' show-overflow-tooltip>
						<template slot-scope="scope">
							{{scope.row.user.rename ? scope.row.user.rename : scope.row.user.org_name}}
						</template>
					</el-table-column>
					<el-table-column property="u_name" align='center' label="用户名" show-overflow-tooltip width="">
					</el-table-column>
					<el-table-column width="210" align='center' property="time_frame" show-overflow-tooltip label="时段">
					</el-table-column>
					<el-table-column width="" align='center' property="join_time" show-overflow-tooltip label="观看直播时间">
					</el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button @click="getLiveListData" type="primary" icon="el-icon-refresh" circle title="刷新数据" size="mini">
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
import { str2Buffer } from './../../../tools/tool';

export default {
	name: '',
	data() {
		return {
			total_number: 0,
			liveListData: [],
			live_name: '',
			exportList: [],
			listParam: {
				live_id: this.$route.query.id,
				keyword: '',
				page_index: 1,
				page_size: 10,
			},
		}
	},
	created() {
		this.getLiveListData()
	},
	methods: {
		//列表
		getLiveListData() {
			let success = (res => {
				let data = res.data;
				this.liveListData = data.data;
				this.total_number = data.data_sum;
			});
			this.$ajax.get('api/live/live_user_list', { params: this.listParam, func: { success: success } });
		},
		/**
		 * 重置搜索条件
		 */
		reachList() {
			this.listParam = {
				live_id: this.$route.query.id,
				keyword: '',
				page_index: 1,
				page_size: 10,
			}

			this.getLiveListData();
		},
		//搜索
		searchLiveList() {
			this.listParam.page_index = 1;
			this.getLiveListData()
		},
		handleSizeChange(val) {
			this.listParam.page_index = 1;
			this.listParam.page_size = val;
			this.getLiveListData()
		},
		handleCurrentChange(val) {
			this.listParam.page_index = val;
			this.getLiveListData();
		},
		//下载列表
		downloadMater() {
			if (this.liveListData.length === 0) {
				this.$message.warning('没有数据可以导出');
				return false;
			}
			const defaultCellStyle = { font: { name: "Verdana", sz: 14, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };
			const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', defaultCellStyle: defaultCellStyle, showGridLines: false };
			const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
			this.exportList = [];
			for (let i = 0; i <= this.liveListData.length - 1; i++) {
				if (i === 0) {
					this.live_name = this.liveListData[i].l_name
				}
				this.exportList.push({
					"用户名": this.liveListData[i].u_name,
					"用户账户": this.liveListData[i].u_number,
					"时段": this.liveListData[i].time_frame,
					"观看直播时间": this.liveListData[i].join_time
				});
			}
			wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList)

			//创建二进制对象写入转换好的字节流
			let tmpDown = new Blob([str2Buffer(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
			FileSaver.saveAs(tmpDown, `${this.live_name}直播用户记录.xlsx`);
		},
	}
}

</script>
